<template>
    <div class="login-container">
        <canvas id="starCanvas" ref="canvasRef"></canvas>

        <div class="login-box">
            <div class="login-title">
                <img src="/public/favicon.ico" alt="logo">
                <h2>开发者探索</h2>
            </div>

            <div class="qrcode-container">
                <div class="qrcode-box">
                    <!-- 这里放置二维码图片，src需要从后端获取 -->
                    <img :src="qrCodeUrl" alt="微信登录二维码" v-if="qrCodeUrl">
                    <div class="loading" v-else>
                        <el-icon class="is-loading">
                            <Loading />
                        </el-icon>
                        <span>二维码加载中...</span>
                    </div>
                </div>
                <p class="qrcode-tip">请使用微信扫描二维码获取验证码</p>
                <el-button type="primary" class="refresh-btn" @click="refreshQrCode" v-if="isQrCodeExpired">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    刷新二维码
                </el-button>

                <!-- 验证码输入框 -->
                <el-input v-model="verifyCode" placeholder="请输入4位数字验证码" maxlength="4" :show-password="true"
                    class="verify-input" @input="handleCodeInput">
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>

                <el-button type="primary" class="login-btn" @click="handleLogin" :loading="loginLoading">
                    登录
                </el-button>
            </div>

            <div class="login-footer">
                注册登录即表示同意
                <el-link type="primary">用户协议</el-link>
                和
                <el-link type="primary">隐私政策</el-link>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Loading, Refresh, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/userStores'
import { useStarCanvas } from "@/scripts/useStarCanvans";
import router from '@/router';

const { userLogin } = useUserStore();
const canvasRef = ref(null);
const qrCodeUrl = ref('http://156.238.235.221:9000/photo/3edadb0eab014fbaa3582108c0253d30.jpg');
const isQrCodeExpired = ref(false);
const verifyCode = ref('');
const loginLoading = ref(false);

// 使用流星画布hook
const { initCanvas, destroyCanvas } = useStarCanvas();

// 获取二维码
const getQrCode = async () => {
    isQrCodeExpired.value = false
}

// 刷新二维码
const refreshQrCode = () => {
    qrCodeUrl.value = ''
    verifyCode.value = ''
    getQrCode();
}

// 验证码输入处理 - 只允许输入数字
const handleCodeInput = (value: string) => {
    // 过滤非数字字符
    verifyCode.value = value.replace(/[^\d]/g, '').slice(0, 4);
}


// 处理登录
const handleLogin = async () => {
    loginLoading.value = true
    // 发送请求
    try {
        // 用户登录请求
        await userLogin(verifyCode.value);
        // 登录成功，跳转到主页
        router.replace({ path: "/" });
    } finally {
        loginLoading.value = false
    }
}

/**
 * 组件挂载完毕的钩子函数
 */
onMounted(() => {
    // 初始化画布
    initCanvas(canvasRef.value);
    // 获取二维码
    getQrCode();
});

/**
 * 组件销毁后调用的钩子函数
 */
onUnmounted(() => {
    // 销毁canvas
    destroyCanvas();
});

</script>

<style scoped>
.login-container {
    height: 100vh;
    width: 100vw;
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#starCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.login-box {
    position: relative;
    width: 340px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.login-title {
    text-align: center;
    margin-bottom: 20px;
}

.login-title img {
    width: 50px;
    height: 50px;
}

.login-title h2 {
    font-size: 20px;
    margin-top: 8px;
}

.qrcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}

.qrcode-box {
    width: 180px;
    height: 180px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.qrcode-box img {
    width: 100%;
    height: 100%;
}

.qrcode-tip {
    color: #666;
    font-size: 13px;
    margin-bottom: 12px;
}

.verify-input {
    width: 220px;
    margin-bottom: 12px;
}

.login-btn {
    width: 220px;
}

.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #909399;
    font-size: 13px;
}

.refresh-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 13px;
}

.login-footer {
    margin-top: 15px;
    text-align: center;
    font-size: 13px;
    color: #666;
}
</style>